<template>
    <div>
        <!-- 1.商品详情顶部导航区域 -->
        <nav-comp :back="$route.meta.back" :title="$route.meta.title"></nav-comp>
        <!-- 2. 间隔槽-->
        <gap-comp :height="1"></gap-comp>
        <!-- 商品详情数据区域 -->
        <img :src="goodDesc.img" class="banner">
        <hr>
        <p>商品的名称：{{ goodDesc.goodsname }}</p>
        <p>商品的价格：{{ goodDesc.price }}￥</p>

        <!-- 3.商品详情图片 -->
        <van-image width="100%" :src="detailImg" />

        <!-- 4.商品底部导航 -->
        <van-goods-action>
            <van-goods-action-icon icon="chat-o" text="客服" dot />
            <van-goods-action-icon icon="cart-o" text="购物车" :badge="cartNum" @click="goCart" />
            <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
            <van-goods-action-button type="warning" text="加入购物车" @click="changeSku" />
            <van-goods-action-button type="danger" text="立即购买" />
        </van-goods-action>

        <!-- 5.商品sku列表 -->
        <van-sku v-model="show" :sku="sku" :goods="goods" :goods-id="goodDesc.id" @add-cart="onAddCartClicked" />
    </div>
</template>

<script>
export default {
    data() {
        return {
            uid: this.$utils.getUid(),
            goodDesc: {},//商品详情数据
            show: false,//控制sku列表是否显示
            goods: {},//商品缩略图数据
            cartNum: "",//购物车商品数量
            detailImg: require("@/assets/img/pic/detail/2.jpg"),
            sku: {
                // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
                // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
                tree: [
                    {
                        k: "颜色", // skuKeyName：规格类目名称
                        k_s: "s1", // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
                        v: [
                            {
                                id: "1", // skuValueId：规格值 id
                                name: "蓝色", // skuValueName：规格值名称
                                imgUrl:
                                    "https://img14.360buyimg.com/n0/jfs/t1/195251/28/503/70907/608a8bc4E87eaf1ae/9aa39ad669ed7f39.jpg", // 规格类目图片，只有第一个规格类目可以定义图片
                                previewImgUrl:
                                    "https://img14.360buyimg.com/n0/jfs/t1/195251/28/503/70907/608a8bc4E87eaf1ae/9aa39ad669ed7f39.jpg", // 用于预览显示的规格类目图片
                            },
                            {
                                id: "2",
                                name: "粉色",
                                imgUrl:
                                    "https://img14.360buyimg.com/n0/jfs/t1/131776/9/23287/325305/621f295fE9dc6a3ce/117b4d1ed262266a.jpg",
                                previewImgUrl:
                                    "https://img14.360buyimg.com/n0/jfs/t1/131776/9/23287/325305/621f295fE9dc6a3ce/117b4d1ed262266a.jpg",
                            },
                        ],
                        largeImageMode: true, //  是否展示大图模式
                    },
                    {
                        k: '内存',
                        k_s: "s2",
                        v: [
                            {
                                id: "1", // skuValueId：规格值 id
                                name: "4G", // skuValueName：规格值名称
                            },
                            {
                                id: "2", // skuValueId：规格值 id
                                name: "8G", // skuValueName：规格值名称
                            },
                        ]
                    }
                ],
                // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
                list: [
                    {
                        id: 2259, // skuId
                        s1: "1", // 规格类目 k_s 为 s1 的对应规格值 id
                        s2: "1",
                        price: 200000, // 价格（单位分）
                        stock_num: 110, // 当前 sku 组合对应的库存
                    },
                    {
                        id: 2260, // skuId
                        s1: "2", // 规格类目 k_s 为 s1 的对应规格值 id
                        s2: "2",
                        price: 300000, // 价格（单位分）
                        stock_num: 60, // 当前 sku 组合对应的库存
                    },
                    {
                        id: 2261, // skuId
                        s1: "1", // 规格类目 k_s 为 s1 的对应规格值 id
                        s2: "2",
                        price: 320000, // 价格（单位分）
                        stock_num: 30, // 当前 sku 组合对应的库存
                    },
                    {
                        id: 2261, // skuId
                        s1: "2", // 规格类目 k_s 为 s1 的对应规格值 id
                        s2: "1",
                        price: 280000, // 价格（单位分）
                        stock_num: 200, // 当前 sku 组合对应的库存
                    }
                ],
                price: "1999", // 默认价格（单位元）
                stock_num: 400, // 商品总库存
            }
        };
    },
    mounted() {
        // 根据商品的iD获取商品详情
        this.getGoodDesc(this.$route.query.id)
    },
    methods: {
        // 获取商品详情数据
        getGoodDesc(id) {
            this.$api.reqGetGoodDesc({ id })
                .then(res => {
                    console.log(res)
                    this.goodDesc = res[0]
                    this.goodDesc.img = this.$pre + this.goodDesc.img
                    this.goods = { picture: this.goodDesc.img }
                })
                .catch(err => console.log(err))
        },
        // 唤起sku弹窗
        changeSku() {
            this.show = true
        },
        // 添加购物车
        onAddCartClicked(info) {
            //获取请求参数
            let { goodsId, selectedNum } = info
            this.$api.reqAddCart({ uid: this.uid, goodsid: goodsId, num: selectedNum })
                .then(res => {
                    this.show = false//关闭sku弹窗
                    this.cartNum = res.cartCount//复写纸购物车选项卡右上角角标数量
                    this.$notify({
                        type: 'success',
                        message: '添加成功！'
                    });
                })
                .catch(err => console.log(err))
        },
        //跳转到购物车页面
        goCart() {
            this.$router.push("/cart")
        }

    },
};
</script>

<style lang="less" scoped>
@import "../../assets/less/gooddesc.less";
</style>
 